<template>
	<view class="addstaffbox">
		<view class="item u-row-between">
			<text>员工头像</text>
			<view class="chooseImage" @click="uploadImg('portrait')">
				<!-- <text v-if="!stffInfo.portrait" class="iconfontPT iconadd block"></text> -->
				<image class="portrait--img" :src="stffInfo.portrait ? `${carHost}${stffInfo.portrait}` : '../../static/images/admin.jpg'" mode="aspectFill"></image>
			</view>
		</view>
		<view class="item">
			<text>姓名</text>
			<view><input type="text" value="" v-model="stffInfo.name" placeholder="请输入员工姓名" /></view>
		</view>
		<view class="item">
			<text>职位</text>
			<view><input type="text" value="" v-model="stffInfo.position" placeholder="请输入员工职位" /></view>
		</view>
		<view class="item">
			<text>账号</text>
			<view><input type="text" value="" v-model="stffInfo.phone" placeholder="请输入员工手机号" /></view>
		</view>
		<view class="item">
			<text>密码</text>
			<view><input type="password" value="" v-model="password" placeholder="请输入员工密码" /></view>
		</view>
		<view class="item">
			<text>服务宗旨</text>
			<view><input type="text" value="" v-model="stffInfo.purpose" placeholder="请输入服务宗旨" /></view>
		</view>

		<view class="item--work-list">
			<view class="item--top u-row-between">
				<text class="item--top__label">从业经历</text>
				<view>
					<!-- <text>请增加从业经历</text> -->
					<text class="work__add iconfontPT iconadd" @click="showWorkModal"></text>
				</view>
			</view>

			<view class="worklist">
				<view class="work" v-for="(item, index) in workList" :key="index">
					<view class="top">
						<view class="work__info">
							<text>{{ item.company_name }}</text>
							<text class="work__duration">{{ item.s_serving }} — {{ item.e_serving }}</text>
						</view>
						<view class="bottom">{{ item.last_post }}</view>
					</view>

					<view class="work__tool">
						<text class="iconfontPT iconbianji" @click="eidtWork(index)"></text>
						<text class="iconfontPT iconshanchu11" @click="deleteWork(index)"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<text>员工照片</text>
			<!-- <view class="imgbox" v-if="image.length != 0"><image v-for="(item, index) in image" :key="index" :src="host + item"></image></view> -->
			<!-- <view class="chooseImage flex-y-center" @click="uploadImg('image')"><text v-if="image.length < 3" class="iconfontPT iconadd block"></text></view> -->
		</view>

		<view class="imgBox"><imageUpload @onUploadChange="handleChooseImage" :uploadType="'identify'" :type="'md'" :prop_photos="image" /></view>

		<view class="item u-row-between">
			<text>是否启用</text>
			<view><switch :checked="stffInfo.status == 2" @click="handleStatusChange" /></view>
		</view>
		<view class="item u-row-between">
			<text>是否推荐</text>
			<view><switch :checked="stffInfo.is_recommend == 1" @click="handleRecommendChange" /></view>
		</view>
		<view class="creat_btn" @click="add"><text>确定</text></view>

		<u-modal
			v-model="showModal"
			:title-style="{
				fontSize: '34rpx',
				fontSeight: 'bold',
				color: '#333'
			}"
			:show-confirm-button="false"
			:show-cancel-button="false"
		>
			<view class="slot-content">
				<view class="add-work-box">
					<view class="add-work__item">
						<view class="add-work__item__title">公司名称</view>
						<view class="add-work__item__content">
							<input type="text" class="add-work__item__input" v-model="workInfo.company_name" placeholder="请输入公司名称" />
						</view>
					</view>
					<view class="add-work__item">
						<view class="add-work__item__title">在职时间</view>
						<view class="add-work__item__content">
							<view class="date-range">
								<view class="date-range__date">
									<picker mode="date" :value="workInfo.s_serving" @change="timeChange($event, 's_serving')">
										<text class="date-range__txt">{{ workInfo.s_serving }}</text>
									</picker>
								</view>
								<view class="date-range__line">—</view>
								<view class="date-range__date">
									<picker mode="date" :value="workInfo.e_serving" @change="timeChange($event, 'e_serving')">
										<text class="date-range__txt">{{ workInfo.e_serving }}</text>
									</picker>
								</view>
							</view>
						</view>
					</view>
					<view class="add-work__item">
						<view class="add-work__item__title">工作岗位</view>
						<view class="add-work__item__content"><input type="text" class="add-work__item__input" v-model="workInfo.last_post" placeholder="请输入工作岗位" /></view>
					</view>

					<view class="add-work__tool">
						<text class="add-work__btn add-work__btn--cancel" @click="closeWorkModal">取消</text>
						<text class="add-work__btn add-work__btn--ok" @click="updateWork">确定</text>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import { addStaff, getStaffInfo, editStaff } from '../../apis/shop/api.js';
import imageUpload from '../components/public/image-upload.vue';

export default {
	data() {
		const currentDate = this.$u.date(new Date().getTime(), 'yyyy-mm-dd');

		return {
			workInfo: {
				company_name: '',
				s_serving: '',
				e_serving: '',
				last_post: ''
			},

			workList: [],
			s_serving: currentDate,
			e_serving: currentDate,
			currentDate,
			showModal: false,
			items: [
				{
					value: 'manager',
					name: '门店管理员'
				},
				{
					value: 'use',
					name: '门店员工',
					checked: 'true'
				}
			],
			current: 0,
			stffInfo: {
				status: 2,
				portrait: '',
				image: ''
			},
			params: {
				userlogo: ''
			},
			image: [],
			username: '',
			password: '',
			store_id: '',
			isEdit: false,
			workindex: -1,
			isEditWork: false,
			dateValidation: true
		};
	},
	computed:{
		carHost(){
			return this.$baseHost.car
		}
	},
	components: {
		imageUpload
	},
	onLoad(option) {
		uni.setNavigationBarTitle({
			title: option.id ? '编辑员工' : '添加员工'
		});

		this.store_id = uni.getStorageSync('store_id');
		this.token = uni.getStorageSync('token');
		if (option.id != undefined) {
			this.isEdit = true;
			this.getinfo(option.id);
		}
	},
	onShow() {},
	methods: {
		handleChooseImage(item, list) {
			this.image = list;
		},
		handleStatusChange() {
			let status = this.stffInfo.status;
			this.stffInfo.status = status == 2 ? 0 : 2;
		},
		handleRecommendChange() {
			let is_recommend = this.stffInfo.is_recommend;
			this.stffInfo.is_recommend = is_recommend == 1 ? 0 : 1;
		},
		switchChange(e) {},
		getinfo(id) {
			let that = this;
			getStaffInfo({
				id: id,
				store_id: that.store_id,
				token: that.token
			}).then(res => {
				if (res.code == 1) {
					that.stffInfo = res.data;
					that.image = that.stffInfo.image && res.data.image.split(',');

					that.workList = res.data.work || [];
				}
			});
		},
		add() {
			this.stffInfo.token = this.token;
			this.stffInfo.store_id = this.store_id;
			this.stffInfo.image = this.image.join(',');
			if (this.password != '') {
				this.stffInfo.password = this.password;
			}
			if (!this.stffInfo.name) {
				uni.showToast({
					title: '请输入员工姓名',
					icon: 'none'
				});
				return false;
			}
			if (!this.stffInfo.phone || !/^1[3-9]\d{9}$/.test(this.stffInfo.phone)) {
				uni.showToast({
					title: '请输入员工手机号或手机号不正确',
					icon: 'none'
				});
				return false;
			}
			if (this.workList.length === 0) {
				uni.showToast({
					title: '请填写完整工作经历',
					icon: 'none'
				});
				return false;
			}

			this.stffInfo.work = this.workList || [];

			if (!this.isEdit) {
				this.stffInfo.company_name = this.company_name;

				addStaff(this.stffInfo).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '添加成功'
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			} else {
				editStaff(this.stffInfo).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '修改成功'
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			}
		},
		uploadImg(key) {
			let that = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['copressed'],
				success(res) {
					var imgFiles = res.tempFilePaths[0];
					console.log(imgFiles);
					var uper = uni.uploadFile({
						url: that.$baseHost.car+'/api/common/upload',
						filePath: imgFiles,
						name: 'file',
						success(res) {
							if (res.statusCode == 200) {
								console.log(JSON.parse(res.data).data.url);
								if (key == 'portrait') {
									that.stffInfo.portrait = JSON.parse(res.data).data.url;
								} else if (key == 'image') {
									that.image.push(JSON.parse(res.data).data.url);
								}
							}
						}
					});
				}
			});
		},
		timeChange(e, key) {
			const selectedDate = new Date(e.target.value).getTime();
			const s_servingDate = new Date(this.workInfo.s_serving).getTime();
			const e_servingDate = new Date(this.workInfo.e_serving).getTime();

			if (e.target.value && selectedDate < new Date().getTime()) {
				if ((key === 's_serving' && selectedDate > e_servingDate) || (key === 'e_serving' && selectedDate < s_servingDate)) {
					uni.showToast({
						title: '入职时间不能大于离职时间！',
						icon: 'none'
					});
					this.dateValidation = false;
				} else {
					this.dateValidation = true;
				}
			} else {
				uni.showToast({
					title: '工作经历时间不能大于当前时间！',
					icon: 'none'
				});

				this.dateValidation = false;
			}
			
			this.workInfo[key] = e.target.value;
		},
		resetWorkModalDate() {
			this.workInfo = {
				company_name: '',
				s_serving: this.currentDate,
				e_serving: this.currentDate,
				last_post: ''
			};
		},
		showWorkModal() {
			this.showModal = true;
			this.resetWorkModalDate();
			this.isEditWork = false;
		},
		closeWorkModal() {
			this.showModal = false;
		},
		updateWork() {
			const { last_post, company_name } = this.workInfo;
			
			if (!last_post || !company_name) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				});
				return false;
			}
			
			if(!this.dateValidation) {
				uni.showToast({
					title: '请填写正确的日期',
					icon: 'none'
				});
				return false;
			}

			if (this.isEditWork) {
				this.workList[this.workindex] = this.workInfo;
			} else {
				this.workList.push(this.workInfo);
			}

			this.showModal = false;
		},
		eidtWork(index) {
			this.workindex = index;
			this.showModal = true;
			this.isEditWork = true;
			this.workInfo = this.workList[index];
		},
		deleteWork(index) {
			this.workindex = index;
			this.workList.splice(index, 1);
		}
	}
};
</script>

<style lang="less">
.imgbox {
	display: block;
	width: 100%;

	image {
		width: 220rpx;
		height: 220rpx;
		float: left;
		margin-left: 30rpx;
	}
}

.addstaffbox {
	padding: 0 30rpx;
	padding-bottom: 200rpx;

	.item {
		position: relative;
		padding: 30rpx 0;
		display: flex;
		align-items: center;

		& + .item {
			border-top: 1rpx solid rgba(199, 190, 190, 0.5);
		}

		&.u-row-between {
			justify-content: space-between;
		}

		& > text {
			width: 120rpx;
			font-size: 30rpx;
			margin-right: 40rpx;
			font-weight: bold;
		}

		.chooseImage {
			width: 88rpx;
			height: 88rpx;
			background-color: #f2f2f2;
			font-size: 24rpx;
			color: #c5c5c5;
			border-radius: 50%;
			overflow: hidden;

			.iconadd {
				font-size: 40rpx;
			}

			.portrait--img {
				z-index: 1;
				width: 100%;
				height: 100%;
			}
		}
	}

	.item--work-list {
		border-bottom: 1rpx solid rgba(199, 190, 190, 0.5);
		position: relative;
		padding: 10rpx 0;

		.item--top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			&__label {
				font-size: 30rpx;
				font-weight: bold;
			}

			.work__add {
				font-size: 40rpx;
			}
		}

		.worklist {
			width: 100%;
			padding-top: 20rpx;

			.work {
				position: relative;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-right: 8rpx;

				.top {
					font-size: 24rpx;

					text {
						position: relative;
						font-size: 30rpx;
						margin-right: 20rpx;
						font-weight: 500;
						color: #666;

						&.work__duration {
							font-weight: 500;
							color: #999;
							font-size: 24rpx;
						}
					}
				}

				.bottom {
					margin-top: 10rpx;
					font-weight: 500;
					color: #999;
				}

				&__tool {
					width: 122rpx;
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}

	.login {
		background-color: #e41805;
		color: #fff;
		font-size: 30rpx;
		line-height: 84rpx;
		margin-top: 30rpx;
		text-align: center;
		border-radius: 5px;
	}

	.add-work {
		&-box {
			padding: 30rpx;
		}

		&__item {
			margin-bottom: 40rpx;
			border-bottom: 1rpx solid rgba(199, 190, 190, 0.5);

			&__input {
				font-size: 30rpx;
				font-weight: 500;
			}

			&__title {
				font-size: 24rpx;
				font-weight: bold;
				color: #333;
				border-left: 10rpx solid #e41805;
				padding-left: 18rpx;
			}

			&__content {
				padding: 20rpx 0;

				.date-range {
					display: flex;
					align-items: center;

					&__txt {
						color: #333;
						font-size: 30rpx;
						font-weight: 500;
					}

					&__line {
						margin: 0 50rpx;
					}
				}
			}
		}

		&__tool {
			padding: 30rpx 0;

			display: flex;
			justify-content: space-between;
		}

		&__btn {
			border-radius: 20rpx;
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			padding: 20rpx 0;
			margin: 0 24rpx;
			flex: 1;

			&--cancel {
				background-color: #bfbfbf;
			}

			&--ok {
				background-color: #e41805;
			}
		}
	}
}
</style>
